<template>
    <div>
        <div class="headerBox">
          <div class="header">
            <x-icon type="ios-arrow-left" size="" class="icon-white"></x-icon>
            {{$route.query.name}}
          </div>
        </div>
        <div style="padding-top: 50px" class="tree">
          <el-tree
            :data="noticeList"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys='ids'
            ref="tree"
            :props="def"
          ></el-tree>
          
        </div>
        <div class="form-section"  >
        <div class="form-item form-item-style1" v-show="idstype=='2'">
            <div class="label-title">
                <label>选择违章标准</label>
            </div>
            <div class="input_div" @click="examinedUnits2()">
                <input type="text" v-model="weizPhenItemListName" disabled placeholder="请选择"><x-icon type="ios-arrow-right" size="22" class="icon-right" ></x-icon>
            </div>
        </div>

        <div class="form-item form-item-style1" v-show="idstype=='2'">
            <div class="label-title">
                <label>选择抄送单位</label>
            </div>
            <div class="input_div" @click="classValue2=true">
                <input type="text"
                    placeholder="请选择"
                    disabled v-model="senddepart">
                <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
            </div>
        </div>
        <div class="btns">
           <p class="transfer_p"><span @click="ent">确定</span> <em style="margin-right: 10px;" @click="clear">清空</em></p>
        </div>
        </div>
            <popup v-model="classValue7" width="100%">
                <ztree2
                    :data="data2"
                    @nodeClick="nodeClick7"
                    :name="'departName'"
                    style="margin-top:40px"
                    >
                </ztree2>
            </popup>
            <popup v-model="classValue8" width="100%" height="100%">
                <div class="alertMain">
                    <h1>{{title}} </h1>
                    <ul v-for="(item,index) in list" :key="index">
                        <li @click="chooese(item)">{{item.weizPhenItem}} </li>
                    </ul>
                </div>
            </popup>
            <!-- 抄送单位 -->
            <popup v-model="classValue2" width="100%">
                <div id="classValue2">
                    <ul class="popList">
                        <li :class="ind==index ? 'active' : ''" v-for="(item,index) in radio001" :key="index" @click="radioLi(item,index)">
                            <p>{{item}}<img src="../../../static/images/list_checked.png"></p>
                        </li>
                    </ul>
                </div>
            </popup>
    </div>
</template>
<script>
import ztree2 from "./tree/index"
import { Popup } from "vux";
export default {
    data(){
        return{
            def:{
            children:'data',
            label:"hiddenDangeDescription",
            },
            noticesIds:[],
            noticesIds:[],
            noticesIds:[],
            ids:[],
            noticeList:[],
            idstype:'',
            weizPhenItemListNo:'',
            weizPhenItemshouldScore:'',
            weizPhenItemListName:'',
            shouldScore:'',
            senddepart:'',
            data2:[],
            classValue7:false,
            classValue8:false,
            list:[],
            title:'',
            radio001:['项目管理一部','项目管理二部'],
            classValue2: false,
            ind:'9999',
        }
    },
    components: {
      Popup,
      ztree2,
    },
    mounted(){
        this.idstype = this.$route.query.type
        this.gethiddenNoticeList()
        
        // this.$vux.toast.show({text: 'Loading'})
                if (this.$route.query.type==1){
                    console.log(this.$store.state.addCheckRecord.noticesIds,19)
                    this.ids=this.$store.state.addCheckRecord.noticesIds
                    console.log(this.ids,20)
                }
                if (this.$route.query.type==2){
                    this.ids=this.$store.state.addCheckRecord.noticesIds2
                }
                if (this.$route.query.type==3){
                    this.ids=this.$store.state.addCheckRecord.noticesIds3
                }
        
    },
    methods:{
        chooese(val){
            if (val){
                this.weizPhenItemListNo=val.weizNo
                this.weizPhenItemshouldScore = val.shouldScore
                this.weizPhenItemListName='记分标准第'+val.weizNo+'条,扣'+ val.shouldScore + '分'
                this.shouldScore=val.shouldScore
                this.classValue8=false
            }
        },
        radioLi(item,index){
            this.ind=index
            this.senddepart=item
            this.classValue2=false
        },
        // 单位树数据
        examinedUnits2(){
            this.$axiosAjax.weizPhenoList({parentId:0}).then((res) => {
                if(res.data.success==true){
                    this.classValue7=true
                    this.data2=res.data.result.data;
                }
            }).catch((err)=>{
                console.log(err)
            })
        },
        // 点击单位树2
        nodeClick7(item){
            console.log(item,1);
            this.title=item.weizName
            this.classValue8=true
            this.classValue7=false

            var pamars={
                classifyID:item.id,
                skipCount:'0',
                maxResultCount:'1000'
            }
            this.$axiosAjax.phenomenonList(pamars).then((res) => {
                if(res.data.success==true){
                    this.list=res.data.result.items;
                }
            }).catch((err)=>{
                console.log(err)
            })
        },
        ent(){
            var list=this.$refs.tree.getCheckedNodes()
            let i = [];
            if(list.length>0){
                list.forEach(item => {
                    if(item.data==null){
                        i.push(item.id);
                    }
                })
                if(this.$route.query.type==1){  // 问题整改通知单
                    this.noticesIds=i
                    this.$store.state.addCheckRecord.noticesIds=i
                }
                // if(this.$route.query.type==4){  // 问题整改通知单X
                //     this.noticesIds=i
                //     this.$store.state.addCheckRecord.noticesIds4=i
                //     this.$store.state.addCheckRecord.IllegalSandardId=this.weizPhenItemListNo
                //     this.$store.state.addCheckRecord.IllegalSandardName=this.weizPhenItemshouldScore
                //     this.$store.state.addCheckRecord.PushDeptId=''
                //     this.$store.state.addCheckRecord.PushDeptName=this.senddepart
                // }
                if(this.$route.query.type==2){  // 违章记分通知单
                    if(this.senddepart!="") {
                        this.noticesIds=i
                        this.$store.state.addCheckRecord.noticesIds2=i
                        this.$store.state.addCheckRecord.IllegalSandardId=this.weizPhenItemListNo
                        this.$store.state.addCheckRecord.IllegalSandardName=this.weizPhenItemshouldScore
                        this.$store.state.addCheckRecord.PushDeptId=''
                        this.$store.state.addCheckRecord.PushDeptName=this.senddepart
                    } else {
                        this.$vux.toast.text("选择抄送单位必填")
                        return; 
                    }
                }
                if(this.$route.query.type==3){  // 停工通知单
                    this.noticesIds3=i
                    this.$store.state.addCheckRecord.noticesIds3=i
                }
               
            }
            this.$router.go(-1)
        },
        clear(){

        },
        // 获取数据
        gethiddenNoticeList(){
            // var ids={
            //     planId:this.$route.query.id
            // }
            this.$axiosAjax.gethiddenNoticeList({planId:this.$route.query.id}).then(res => {
            if(res.data.success==true){
                var arr=res.data.result
                var map = {},
                dest = [];
                for(var i = 0; i < arr.length; i++){
                var ai = arr[i];
                if(!map[ai.hiddenDangerType]){
                    dest.push({
                    id: ai.id,
                    hiddenDangeDescription: ai.hiddenDangerType,
                    data: [ai]
                    });
                    map[ai.hiddenDangerType] = ai
                }else{
                    for(var j = 0; j < dest.length; j++){
                    var dj = dest[j];
                    if(dj.hiddenDangeDescription == ai.hiddenDangerType){
                        dj.data.push(ai);
                        break;
                    }
                    }
                }
                }
                this.noticeList=dest

            }
            });
        },
    }
}
</script>
<style lang="less" scoped>
    .tree{
        padding-right: 10px;
        .el-tree-node__label{
            font-size: 16px
        }
    }
    .transfer_p{
      padding: 10px 20px;
      height: 30px;
      span,em{
          width: 60px;
          height: 30px;
          text-align: center;
          line-height: 32px;
          font-size: 16px;
          border-radius: 5px;
          color: #fff;
          letter-spacing: 1px;
      }
      span{
          float: right;
          background-color:#2abf72;
      }
      em{
          float: left;
          background-color: #ceaa6c;
      }
  }
.alertMain{
    height: 100%;
    overflow-y: scroll;
    background-color: #fff;
    padding: 0 20px;
    h1{
        width: 100%;
        font-size: 16px;
        height: 40px;
        line-height: 40px;
        font-weight: bold;
        border-bottom: 1px solid #dcdada;
    }
    ul{
        li{
            border-bottom: 1px solid #dcdada;
            padding:10px 20px;
            line-height: 20px;
        }
    }
}
.form-item {
    .input_div {
        .vux-x-icon {
            fill: #999;
            float: right;
            margin-top: 16px!important;
        }
    }
    .line_20 {
        line-height: 20px;
    }
}
#classValue2{
  .popList {
    height: 224px;
    li {
        height: 46px;
        border-bottom: 1px solid #f0f1f5;
        position: relative;
        background-color: #fff;
        p {
            width: 100%;
            height: 45px;
            line-height: 45px;
            position: absolute;
            left: 50%;
            top: 0;
            transform: translate(-50%, 0);
            font-size: 14px;
            margin-left: 12px;
            text-align: center;
           
            img {
                height: 14px;
                width: 14px;
                margin-left: 10px;
                vertical-align: middle;
                position: relative;
                top: -1px;
                opacity: 0;
            }
        }
    }
    li.active {
        p {
        color: #469b7a;
        }
        img {
        opacity: 1;
        }
    }
  }
  &.divClass {
      width: 100%;
      height: 300px;
      overflow-y: scroll;
      .hiddden {
            li.active {
            p {
            color: #469b7a;
            }
            img {
            opacity: 1;
            }
        }
          li {
              min-height: 46px;
              border-bottom: 1px solid #f0f1f5;
              position: relative;
              background-color: #fff;
              padding: 20px 0;
              p {
                  width: 90%;
                  box-sizing: border-box;
                  display: inline-block;
                  padding: 0 10px 0 20px;
              }
              img {
                  height: 14px;
                  width: 14px;
                  vertical-align: middle;
                  position: relative;
                  top: -10px;
                  opacity: 0;
              }
          }
      }
  }
}
</style>